<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Asciidoctor 2.0.10">
<meta name="author" content="Olivier Bilodeau, Guillaume Grossetie, Dan Allen, Rahman Usta, Charles Moulliard">
<title>Reveal.js converter for Asciidoctor</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
<style>
/* Asciidoctor default stylesheet | MIT License | https://asciidoctor.org */
/* Uncomment @import statement to use as custom stylesheet */
/*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
audio,video{display:inline-block}
audio:not([controls]){display:none;height:0}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
a{background:none}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
*,*::before,*::after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
html,body{font-size:100%}
body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto;tab-size:4;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}
a:hover{cursor:pointer}
img,object,embed{max-width:100%;height:auto}
object,embed{height:100%}
img{-ms-interpolation-mode:bicubic}
.left{float:left!important}
.right{float:right!important}
.text-left{text-align:left!important}
.text-right{text-align:right!important}
.text-center{text-align:center!important}
.text-justify{text-align:justify!important}
.hide{display:none}
img,object,svg{display:inline-block;vertical-align:middle}
textarea{height:auto;min-height:50px}
select{width:100%}
.center{margin-left:auto;margin-right:auto}
.stretch{width:100%}
.subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}
a{color:#2156a5;text-decoration:underline;line-height:inherit}
a:hover,a:focus{color:#1d4b8f}
a img{border:0}
p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
p aside{font-size:.875em;line-height:1.35;font-style:italic}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
h1{font-size:2.125em}
h2{font-size:1.6875em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
h4,h5{font-size:1.125em}
h6{font-size:1em}
hr{border:solid #dddddf;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
em,i{font-style:italic;line-height:inherit}
strong,b{font-weight:bold;line-height:inherit}
small{font-size:60%;line-height:inherit}
code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
ul,ol{margin-left:1.5em}
ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
ul.square{list-style-type:square}
ul.circle{list-style-type:circle}
ul.disc{list-style-type:disc}
ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
dl dt{margin-bottom:.3125em;font-weight:bold}
dl dd{margin-bottom:1.25em}
abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
abbr{text-transform:none}
blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
blockquote cite::before{content:"\2014 \0020"}
blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
@media screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
h1{font-size:2.75em}
h2{font-size:2.3125em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
h4{font-size:1.4375em}}
table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
table thead,table tfoot{background:#f7f8f7}
table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
table tr.even,table tr.alt{background:#f8f8f7}
table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
.clearfix::before,.clearfix::after,.float-group::before,.float-group::after{content:" ";display:table}
.clearfix::after,.float-group::after{clear:both}
:not(pre):not([class^=L])>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed;word-wrap:break-word}
:not(pre)>code.nobreak{word-wrap:normal}
:not(pre)>code.nowrap{white-space:nowrap}
pre{color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;line-height:1.45;text-rendering:optimizeSpeed}
pre code,pre pre{color:inherit;font-size:inherit;line-height:inherit}
pre>code{display:block}
pre.nowrap,pre.nowrap pre{white-space:pre;word-wrap:normal}
em em{font-style:normal}
strong strong{font-weight:400}
.keyseq{color:rgba(51,51,51,.8)}
kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
.keyseq kbd:first-child{margin-left:0}
.keyseq kbd:last-child{margin-right:0}
.menuseq,.menuref{color:#000}
.menuseq b:not(.caret),.menuref{font-weight:inherit}
.menuseq{word-spacing:-.02em}
.menuseq b.caret{font-size:1.25em;line-height:.8}
.menuseq i.caret{font-weight:bold;text-align:center;width:.45em}
b.button::before,b.button::after{position:relative;top:-1px;font-weight:400}
b.button::before{content:"[";padding:0 3px 0 2px}
b.button::after{content:"]";padding:0 2px 0 3px}
p a>code:hover{color:rgba(0,0,0,.9)}
#header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
#header::before,#header::after,#content::before,#content::after,#footnotes::before,#footnotes::after,#footer::before,#footer::after{content:" ";display:table}
#header::after,#content::after,#footnotes::after,#footer::after{clear:both}
#content{margin-top:1.25em}
#content::before{content:none}
#header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
#header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #dddddf}
#header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #dddddf;padding-bottom:8px}
#header .details{border-bottom:1px solid #dddddf;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap}
#header .details span:first-child{margin-left:-.125em}
#header .details span.email a{color:rgba(0,0,0,.85)}
#header .details br{display:none}
#header .details br+span::before{content:"\00a0\2013\00a0"}
#header .details br+span.author::before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
#header .details br+span#revremark::before{content:"\00a0|\00a0"}
#header #revnumber{text-transform:capitalize}
#header #revnumber::after{content:"\00a0"}
#content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #dddddf;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
#toc{border-bottom:1px solid #e7e7e9;padding-bottom:.5em}
#toc>ul{margin-left:.125em}
#toc ul.sectlevel0>li>a{font-style:italic}
#toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
#toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
#toc li{line-height:1.3334;margin-top:.3334em}
#toc a{text-decoration:none}
#toc a:active{text-decoration:underline}
#toctitle{color:#7a2518;font-size:1.2em}
@media screen and (min-width:768px){#toctitle{font-size:1.375em}
body.toc2{padding-left:15em;padding-right:0}
#toc.toc2{margin-top:0!important;background:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #e7e7e9;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
#toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
#toc.toc2>ul{font-size:.9em;margin-bottom:0}
#toc.toc2 ul ul{margin-left:0;padding-left:1em}
#toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
body.toc2.toc-right{padding-left:0;padding-right:15em}
body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #e7e7e9;left:auto;right:0}}
@media screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
#toc.toc2{width:20em}
#toc.toc2 #toctitle{font-size:1.375em}
#toc.toc2>ul{font-size:.95em}
#toc.toc2 ul ul{padding-left:1.25em}
body.toc2.toc-right{padding-left:0;padding-right:20em}}
#content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
#content #toc>:first-child{margin-top:0}
#content #toc>:last-child{margin-bottom:0}
#footer{max-width:100%;background:rgba(0,0,0,.8);padding:1.25em}
#footer-text{color:rgba(255,255,255,.8);line-height:1.44}
#content{margin-bottom:.625em}
.sect1{padding-bottom:.625em}
@media screen and (min-width:768px){#content{margin-bottom:1.25em}
.sect1{padding-bottom:1.25em}}
.sect1:last-child{padding-bottom:0}
.sect1+.sect1{border-top:1px solid #e7e7e9}
#content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
#content h1>a.anchor::before,h2>a.anchor::before,h3>a.anchor::before,#toctitle>a.anchor::before,.sidebarblock>.content>.title>a.anchor::before,h4>a.anchor::before,h5>a.anchor::before,h6>a.anchor::before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
#content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
#content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
#content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
details,.audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
details>summary:first-of-type{cursor:pointer;display:list-item;outline:none;margin-bottom:.75em}
.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
table.tableblock.fit-content>caption.title{white-space:nowrap;width:0}
.paragraph.lead>p,#preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:1.21875em;line-height:1.6;color:rgba(0,0,0,.85)}
table.tableblock #preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:inherit}
.admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
.admonitionblock>table td.icon{text-align:center;width:80px}
.admonitionblock>table td.icon img{max-width:none}
.admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
.admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #dddddf;color:rgba(0,0,0,.6)}
.admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
.exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px}
.exampleblock>.content>:first-child{margin-top:0}
.exampleblock>.content>:last-child{margin-bottom:0}
.sidebarblock{border-style:solid;border-width:1px;border-color:#dbdbd6;margin-bottom:1.25em;padding:1.25em;background:#f3f3f2;-webkit-border-radius:4px;border-radius:4px}
.sidebarblock>:first-child{margin-top:0}
.sidebarblock>:last-child{margin-bottom:0}
.sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
.exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
.literalblock pre,.listingblock>.content>pre{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;overflow-x:auto;padding:1em;font-size:.8125em}
@media screen and (min-width:768px){.literalblock pre,.listingblock>.content>pre{font-size:.90625em}}
@media screen and (min-width:1280px){.literalblock pre,.listingblock>.content>pre{font-size:1em}}
.literalblock pre,.listingblock>.content>pre:not(.highlight),.listingblock>.content>pre[class="highlight"],.listingblock>.content>pre[class^="highlight "]{background:#f7f7f8}
.literalblock.output pre{color:#f7f7f8;background:rgba(0,0,0,.9)}
.listingblock>.content{position:relative}
.listingblock code[data-lang]::before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:inherit;opacity:.5}
.listingblock:hover code[data-lang]::before{display:block}
.listingblock.terminal pre .command::before{content:attr(data-prompt);padding-right:.5em;color:inherit;opacity:.5}
.listingblock.terminal pre .command:not([data-prompt])::before{content:"$"}
.listingblock pre.highlightjs{padding:0}
.listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
.listingblock pre.prettyprint{border-width:0}
.prettyprint{background:#f7f7f8}
pre.prettyprint .linenums{line-height:1.45;margin-left:2em}
pre.prettyprint li{background:none;list-style-type:inherit;padding-left:0}
pre.prettyprint li code[data-lang]::before{opacity:1}
pre.prettyprint li:not(:first-child) code[data-lang]::before{display:none}
table.linenotable{border-collapse:separate;border:0;margin-bottom:0;background:none}
table.linenotable td[class]{color:inherit;vertical-align:top;padding:0;line-height:inherit;white-space:normal}
table.linenotable td.code{padding-left:.75em}
table.linenotable td.linenos{border-right:1px solid currentColor;opacity:.35;padding-right:.5em}
pre.pygments .lineno{border-right:1px solid currentColor;opacity:.35;display:inline-block;margin-right:.75em}
pre.pygments .lineno::before{content:"";margin-right:-.125em}
.quoteblock{margin:0 1em 1.25em 1.5em;display:table}
.quoteblock:not(.excerpt)>.title{margin-left:-1.5em;margin-bottom:.75em}
.quoteblock blockquote,.quoteblock p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
.quoteblock blockquote{margin:0;padding:0;border:0}
.quoteblock blockquote::before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
.quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
.quoteblock .attribution{margin-top:.75em;margin-right:.5ex;text-align:right}
.verseblock{margin:0 1em 1.25em}
.verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
.verseblock pre strong{font-weight:400}
.verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
.quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
.quoteblock .attribution br,.verseblock .attribution br{display:none}
.quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
.quoteblock.abstract blockquote::before,.quoteblock.excerpt blockquote::before,.quoteblock .quoteblock blockquote::before{display:none}
.quoteblock.abstract blockquote,.quoteblock.abstract p,.quoteblock.excerpt blockquote,.quoteblock.excerpt p,.quoteblock .quoteblock blockquote,.quoteblock .quoteblock p{line-height:1.6;word-spacing:0}
.quoteblock.abstract{margin:0 1em 1.25em;display:block}
.quoteblock.abstract>.title{margin:0 0 .375em;font-size:1.15em;text-align:center}
.quoteblock.excerpt>blockquote,.quoteblock .quoteblock{padding:0 0 .25em 1em;border-left:.25em solid #dddddf}
.quoteblock.excerpt,.quoteblock .quoteblock{margin-left:0}
.quoteblock.excerpt blockquote,.quoteblock.excerpt p,.quoteblock .quoteblock blockquote,.quoteblock .quoteblock p{color:inherit;font-size:1.0625rem}
.quoteblock.excerpt .attribution,.quoteblock .quoteblock .attribution{color:inherit;text-align:left;margin-right:0}
table.tableblock{max-width:100%;border-collapse:separate}
p.tableblock:last-child{margin-bottom:0}
td.tableblock>.content>:last-child{margin-bottom:-1.25em}
td.tableblock>.content>:last-child.sidebarblock{margin-bottom:0}
table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
table.grid-all>thead>tr>.tableblock,table.grid-all>tbody>tr>.tableblock{border-width:0 1px 1px 0}
table.grid-all>tfoot>tr>.tableblock{border-width:1px 1px 0 0}
table.grid-cols>*>tr>.tableblock{border-width:0 1px 0 0}
table.grid-rows>thead>tr>.tableblock,table.grid-rows>tbody>tr>.tableblock{border-width:0 0 1px}
table.grid-rows>tfoot>tr>.tableblock{border-width:1px 0 0}
table.grid-all>*>tr>.tableblock:last-child,table.grid-cols>*>tr>.tableblock:last-child{border-right-width:0}
table.grid-all>tbody>tr:last-child>.tableblock,table.grid-all>thead:last-child>tr>.tableblock,table.grid-rows>tbody>tr:last-child>.tableblock,table.grid-rows>thead:last-child>tr>.tableblock{border-bottom-width:0}
table.frame-all{border-width:1px}
table.frame-sides{border-width:0 1px}
table.frame-topbot,table.frame-ends{border-width:1px 0}
table.stripes-all tr,table.stripes-odd tr:nth-of-type(odd),table.stripes-even tr:nth-of-type(even),table.stripes-hover tr:hover{background:#f8f8f7}
th.halign-left,td.halign-left{text-align:left}
th.halign-right,td.halign-right{text-align:right}
th.halign-center,td.halign-center{text-align:center}
th.valign-top,td.valign-top{vertical-align:top}
th.valign-bottom,td.valign-bottom{vertical-align:bottom}
th.valign-middle,td.valign-middle{vertical-align:middle}
table thead th,table tfoot th{font-weight:bold}
tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
p.tableblock>code:only-child{background:none;padding:0}
p.tableblock{font-size:1em}
ol{margin-left:1.75em}
ul li ol{margin-left:1.5em}
dl dd{margin-left:1.125em}
dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
ul.checklist,ul.none,ol.none,ul.no-bullet,ol.no-bullet,ol.unnumbered,ul.unstyled,ol.unstyled{list-style-type:none}
ul.no-bullet,ol.no-bullet,ol.unnumbered{margin-left:.625em}
ul.unstyled,ol.unstyled{margin-left:0}
ul.checklist{margin-left:.625em}
ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1.25em;font-size:.8em;position:relative;bottom:.125em}
ul.checklist li>p:first-child>input[type="checkbox"]:first-child{margin-right:.25em}
ul.inline{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;list-style:none;margin:0 0 .625em -1.25em}
ul.inline>li{margin-left:1.25em}
.unstyled dl dt{font-weight:400;font-style:normal}
ol.arabic{list-style-type:decimal}
ol.decimal{list-style-type:decimal-leading-zero}
ol.loweralpha{list-style-type:lower-alpha}
ol.upperalpha{list-style-type:upper-alpha}
ol.lowerroman{list-style-type:lower-roman}
ol.upperroman{list-style-type:upper-roman}
ol.lowergreek{list-style-type:lower-greek}
.hdlist>table,.colist>table{border:0;background:none}
.hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
td.hdlist1{font-weight:bold;padding-bottom:1.25em}
.literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
.colist td:not([class]):first-child{padding:.4em .75em 0;line-height:1;vertical-align:top}
.colist td:not([class]):first-child img{max-width:none}
.colist td:not([class]):last-child{padding:.25em 0}
.thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
.imageblock.left{margin:.25em .625em 1.25em 0}
.imageblock.right{margin:.25em 0 1.25em .625em}
.imageblock>.title{margin-bottom:0}
.imageblock.thumb,.imageblock.th{border-width:6px}
.imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
.image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
.image.left{margin-right:.625em}
.image.right{margin-left:.625em}
a.image{text-decoration:none;display:inline-block}
a.image object{pointer-events:none}
sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
sup.footnote a,sup.footnoteref a{text-decoration:none}
sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
#footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
#footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em;border-width:1px 0 0}
#footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;margin-bottom:.2em}
#footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none;margin-left:-1.05em}
#footnotes .footnote:last-of-type{margin-bottom:0}
#content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
.gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
.gist .file-data>table td.line-data{width:99%}
div.unbreakable{page-break-inside:avoid}
.big{font-size:larger}
.small{font-size:smaller}
.underline{text-decoration:underline}
.overline{text-decoration:overline}
.line-through{text-decoration:line-through}
.aqua{color:#00bfbf}
.aqua-background{background:#00fafa}
.black{color:#000}
.black-background{background:#000}
.blue{color:#0000bf}
.blue-background{background:#0000fa}
.fuchsia{color:#bf00bf}
.fuchsia-background{background:#fa00fa}
.gray{color:#606060}
.gray-background{background:#7d7d7d}
.green{color:#006000}
.green-background{background:#007d00}
.lime{color:#00bf00}
.lime-background{background:#00fa00}
.maroon{color:#600000}
.maroon-background{background:#7d0000}
.navy{color:#000060}
.navy-background{background:#00007d}
.olive{color:#606000}
.olive-background{background:#7d7d00}
.purple{color:#600060}
.purple-background{background:#7d007d}
.red{color:#bf0000}
.red-background{background:#fa0000}
.silver{color:#909090}
.silver-background{background:#bcbcbc}
.teal{color:#006060}
.teal-background{background:#007d7d}
.white{color:#bfbfbf}
.white-background{background:#fafafa}
.yellow{color:#bfbf00}
.yellow-background{background:#fafa00}
span.icon>.fa{cursor:default}
a span.icon>.fa{cursor:inherit}
.admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
.admonitionblock td.icon .icon-note::before{content:"\f05a";color:#19407c}
.admonitionblock td.icon .icon-tip::before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
.admonitionblock td.icon .icon-warning::before{content:"\f071";color:#bf6900}
.admonitionblock td.icon .icon-caution::before{content:"\f06d";color:#bf3400}
.admonitionblock td.icon .icon-important::before{content:"\f06a";color:#bf0000}
.conum[data-value]{display:inline-block;color:#fff!important;background:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
.conum[data-value] *{color:#fff!important}
.conum[data-value]+b{display:none}
.conum[data-value]::after{content:attr(data-value)}
pre .conum[data-value]{position:relative;top:-.125em}
b.conum *{color:inherit!important}
.conum:not([data-value]):empty{display:none}
dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
p{margin-bottom:1.25rem}
.sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
.exampleblock>.content{background:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
.print-only{display:none!important}
@page{margin:1.25cm .75cm}
@media print{*{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
html{font-size:80%}
a{color:inherit!important;text-decoration:underline!important}
a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
a[href^="http:"]:not(.bare)::after,a[href^="https:"]:not(.bare)::after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
abbr[title]::after{content:" (" attr(title) ")"}
pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
thead{display:table-header-group}
svg{max-width:100%}
p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
#toc,.sidebarblock,.exampleblock>.content{background:none!important}
#toc{border-bottom:1px solid #dddddf!important;padding-bottom:0!important}
body.book #header{text-align:center}
body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em}
body.book #header .details{border:0!important;display:block;padding:0!important}
body.book #header .details span:first-child{margin-left:0!important}
body.book #header .details br{display:block}
body.book #header .details br+span::before{content:none!important}
body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
.listingblock code[data-lang]::before{display:block}
#footer{padding:0 .9375em}
.hide-on-print{display:none!important}
.print-only{display:block!important}
.hide-for-print{display:none!important}
.show-for-print{display:inherit!important}}
@media print,amzn-kf8{#header>h1:first-child{margin-top:1.25rem}
.sect1{padding:0!important}
.sect1+.sect1{border:0}
#footer{background:none}
#footer-text{color:rgba(0,0,0,.6);font-size:.9em}}
@media amzn-kf8{#header,#content,#footnotes,#footer{padding:0}}
</style>
</head>
<body class="article">
<div id="header">
<h1>Reveal.js converter for Asciidoctor</h1>
<div class="details">
<span id="author" class="author">Olivier Bilodeau</span><br>
<span id="email" class="email"><a href="https://github.com/obilodeau">@obilodeau</a></span><br>
<span id="author2" class="author">Guillaume Grossetie</span><br>
<span id="email2" class="email"><a href="https://github.com/mogztter">@mogztter</a></span><br>
<span id="author3" class="author">Dan Allen</span><br>
<span id="email3" class="email"><a href="https://github.com/mojavelinux">@mojavelinux</a></span><br>
<span id="author4" class="author">Rahman Usta</span><br>
<span id="email4" class="email"><a href="https://github.com/rahmanusta">@rahmanusta</a></span><br>
<span id="author5" class="author">Charles Moulliard</span><br>
<span id="email5" class="email"><a href="https://github.com/cmoulliard">@cmoulliard</a></span><br>
</div>
</div>
<div id="content">
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p><a href="https://github.com/asciidoctor/asciidoctor-reveal.js">Asciidoctor reveal.js</a> is a converter for <a href="https://github.com/asciidoctor/asciidoctor">Asciidoctor</a> and <a href="https://github.com/asciidoctor/asciidoctor.js">Asciidoctor.js</a> that transforms an AsciiDoc document into an HTML5 presentation designed to be executed by the <a href="http://lab.hakim.se/reveal-js/">reveal.js</a> presentation framework.</p>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<div class="title">Tip</div>
</td>
<td class="content">
Want to see some example presentations, see <a href="#_showcase_presentations">Showcase Presentations</a>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>There are four main technology stacks that can convert AsciiDoc into HTML5 / reveal.js:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Asciidoctor / Ruby / Bundler (See <a href="#_ruby_setup">Ruby Setup</a>)</p>
</li>
<li>
<p>Asciidoctor.js / JavaScript (Node.js) / npm (See <a href="#_node_javascript_setup">Node / JavaScript Setup</a>)</p>
</li>
<li>
<p>Standalone Executable (See <a href="#_standalone_executable">Standalone Executable</a>)</p>
</li>
<li>
<p>AsciidoctorJ / JVM / Maven (See <a href="https://github.com/asciidoctor/asciidoctorj-reveal.js">this project</a>)</p>
</li>
</ul>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_ruby_setup">Ruby Setup</h2>
<div class="sectionbody">
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
asciidoctor-reveal.js is now a Ruby Gem.
To ensure repeatability, we recommend that you manage your presentation projects using bundler.
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>For a quick start clone our <a href="https://github.com/obilodeau/presentation-revealjs-starter">starter repository</a> and follow instructions there.</p>
</div>
<div class="paragraph">
<p>For more complete instructions, read on.</p>
</div>
<div class="sect2">
<h3 id="_prerequisites">Prerequisites</h3>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Install <a href="http://bundler.io/">bundler</a> (if not already installed)  using your system&#8217;s package manager or with:</p>
<div class="literalblock">
<div class="content">
<pre>$ gem install bundler</pre>
</div>
</div>
</li>
<li>
<p>If you&#8217;re using RVM, make sure you switch away from any gemset:</p>
<div class="literalblock">
<div class="content">
<pre>$ rvm use default</pre>
</div>
</div>
<div class="paragraph">
<p>or</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ rvm use system</pre>
</div>
</div>
</li>
</ol>
</div>
</div>
<div class="sect2">
<h3 id="_install">Install</h3>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
These instructions should be repeated for every presentation project.
</td>
</tr>
</table>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Create project directory</p>
<div class="literalblock">
<div class="content">
<pre>$ mkdir my-awesome-presentation
$ cd my-awesome-presentation</pre>
</div>
</div>
</li>
<li>
<p>Create a file named <code>Gemfile</code> with the following content:</p>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-ruby" data-lang="ruby">source 'https://rubygems.org'

gem 'asciidoctor-revealjs' # latest released version</code></pre>
</div>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
For some reason, when you use the system Ruby on Fedora, you also have to add the json gem to the Gemfile.
</td>
</tr>
</table>
</div>
</li>
<li>
<p>Install the gems into the project</p>
<div class="literalblock">
<div class="content">
<pre>$ bundle config --local github.https true
$ bundle --path=.bundle/gems --binstubs=.bundle/.bin</pre>
</div>
</div>
</li>
<li>
<p>Optional: Copy or clone reveal.js presentation framework.
Allows you to modify themes or view slides offline.</p>
<div class="literalblock">
<div class="content">
<pre>$ git clone -b 3.9.2 --depth 1 https://github.com/hakimel/reveal.js.git</pre>
</div>
</div>
</li>
</ol>
</div>
</div>
<div class="sect2">
<h3 id="_rendering_the_asciidoc_into_slides">Rendering the AsciiDoc into slides</h3>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Create content in a file (*.adoc, *.ad, etc.).
See examples in <a href="#_syntax_examples">Syntax Examples</a> section to get started.</p>
</li>
<li>
<p>Generate HTML presentation from the AsciiDoc source</p>
<div class="literalblock">
<div class="content">
<pre>$ bundle exec asciidoctor-revealjs \
  -a revealjsdir=https://cdn.jsdelivr.net/npm/reveal.js@3.9.2 CONTENT_FILE.adoc</pre>
</div>
</div>
</li>
<li>
<p>If you did the optional step of having a local reveal.js clone you can
convert AsciiDoc source with</p>
<div class="literalblock">
<div class="content">
<pre>$ bundle exec asciidoctor-revealjs CONTENT_FILE.adoc</pre>
</div>
</div>
</li>
</ol>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<div class="title">Tip</div>
</td>
<td class="content">
If you are using <a href="https://pages.github.com/">GitHub Pages</a>, plan ahead by keeping your source files on <code>master</code> branch and all output files on the <code>gh-pages</code> branch.
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_node_javascript_setup">Node / JavaScript Setup</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="_prerequisites_2">Prerequisites</h3>
<div class="paragraph">
<p>First you must install and configure <a href="https://nodejs.org/en/download/">Node</a> on your machine.</p>
</div>
</div>
<div class="sect2">
<h3 id="node-install">Install</h3>
<div class="paragraph">
<p>We recommend to install the dependencies in a project directory, such as the directory where your AsciiDoc presentations are stored.
If you don&#8217;t have a <code>package.json</code> file in your project directory, you can create one to eliminate warnings during the installation using:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ npm init -y</pre>
</div>
</div>
<div class="paragraph">
<p>You can now install the dependencies:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ npm i --save asciidoctor@^2.0 @asciidoctor/reveal.js</pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_convert_asciidoc_into_slides">Convert AsciiDoc into slides</h3>
<div class="paragraph">
<p>Once the dependencies are installed, verify that the <code>asciidoctor-revealjs</code> command is available.
On Linux and macOS, open a terminal and type:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ npx asciidoctor-revealjs --version</pre>
</div>
</div>
<div class="paragraph">
<p>On Windows, open PowerShell and type:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ .\node_modules\.bin\asciidoctor-revealjs.cmd --version</pre>
</div>
</div>
<div class="paragraph">
<p>The command should report the Asciidoctor CLI version in the terminal:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-console" data-lang="console">Asciidoctor.js 2.0.3 (Asciidoctor 2.0.9) [https://asciidoctor.org]
Runtime Environment (node v10.15.1 on linux)
CLI version 2.0.1</code></pre>
</div>
</div>
<div class="paragraph">
<p>If you don&#8217;t have an existing presentation, you can create a sample presentation named <em class="path">presentation.adoc</em>:</p>
</div>
<div class="listingblock">
<div class="title">presentation.adoc</div>
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">= Title Slide

== Slide One

* Foo
* Bar
* World</code></pre>
</div>
</div>
<div class="paragraph">
<p>To convert the sample presentation into slides, open a terminal and type:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ npx asciidoctor-revealjs presentation.adoc</pre>
</div>
</div>
<div class="paragraph">
<p>On windows, open PowerShell and type:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ .\node_modules\.bin\asciidoctor-revealjs.cmd presentation.adoc</pre>
</div>
</div>
<div class="paragraph">
<p>The above command will generate a file named <em class="path">presentation.html</em>.
You can open this file in a browser.</p>
</div>
<div class="sect3">
<h4 id="_using_the_javascript_api">Using the JavaScript API</h4>
<div class="paragraph">
<p>Alternatively, you can use the JavaScript API to register the converter and convert a document:</p>
</div>
<div class="listingblock">
<div class="title">convert-slides.js</div>
<div class="content">
<pre class="highlight"><code class="language-javascript" data-lang="javascript">// Load Asciidoctor.js and the reveal.js converter
var asciidoctor = require('@asciidoctor/core')()
var asciidoctorRevealjs = require('@asciidoctor/reveal.js')
asciidoctorRevealjs.register()

// Convert the document 'presentation.adoc' using the reveal.js converter
var options = { safe: 'safe', backend: 'revealjs' }
asciidoctor.convertFile('presentation.adoc', options) // <b class="conum">(1)</b></code></pre>
</div>
</div>
<div class="colist arabic">
<ol>
<li>
<p>Creates a file named <code>presentation.html</code> (in the directory where command is run)</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>To execute the script, open a terminal and type:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ node convert-slides.js</pre>
</div>
</div>
<div class="paragraph">
<p>You can open the <code>presentation.html</code> file in your browser and enjoy!</p>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_standalone_executable">Standalone Executable</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Pre-built binary packages can be downloaded from our <a href="https://github.com/asciidoctor/asciidoctor-reveal.js/releases">GitHub release page</a>.
We provide them for Windows 64-bit, Linux 64-bit and macOS 64-bit.
Open an issue if your platform isn&#8217;t supported.
The executables are built using the <a href="#_node_javascript_setup">Node / JavaScript</a> toolchain.</p>
</div>
<div class="sect2">
<h3 id="_install_2">Install</h3>
<div class="ulist">
<ul>
<li>
<p><a href="https://github.com/asciidoctor/asciidoctor-reveal.js/releases">Download the executable</a> for your platform and make it executable with <code>chmod</code> or using the files properties' user interface.</p>
</li>
<li>
<p>Copy or clone the reveal.js presentation framework in the directory where you will build your slidedeck.
Here we do a shallow clone of the repo:</p>
<div class="literalblock">
<div class="content">
<pre>$ git clone -b 3.9.2 --depth 1 https://github.com/hakimel/reveal.js.git</pre>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="sect2">
<h3 id="_convert_asciidoc_into_slides_2">Convert AsciiDoc into slides</h3>
<div class="paragraph">
<p>Open a terminal where the executable is and type:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ ./asciidoctor-revealjs --version</pre>
</div>
</div>
<div class="paragraph">
<p>The command should report the Asciidoctor reveal.js and Asciidoctor CLI version in the terminal:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-console" data-lang="console">Asciidoctor reveal.js 3.0.1 using Asciidoctor.js 2.0.3 (Asciidoctor 2.0.9) [https://asciidoctor.org]
Runtime Environment (node v12.13.1 on linux)
CLI version 3.1.0</code></pre>
</div>
</div>
<div class="paragraph">
<p>If you don&#8217;t have an existing presentation, you can create a sample presentation named <em class="path">presentation.adoc</em>:</p>
</div>
<div class="listingblock">
<div class="title">presentation.adoc</div>
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">= Title Slide
:revealjsdir: reveal.js

== Slide One

* Foo
* Bar
* World</code></pre>
</div>
</div>
<div class="paragraph">
<p>To convert the sample presentation into slides, open a terminal and type:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ ./asciidoctor-revealjs presentation.adoc</pre>
</div>
</div>
<div class="paragraph">
<p>The above command will generate a file named <em class="path">presentation.html</em>.
You can open this file in a browser.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_syntax_examples">Syntax Examples</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Let&#8217;s see some examples of <code>revealjs</code> backend features.
Additional examples can be found in the AsciiDoc files (.adoc) in <code>examples/</code>.</p>
</div>
<div class="sect2">
<h3 id="_basic_presentation_with_speaker_notes">Basic presentation with speaker notes</h3>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">= Title Slide

== Slide One

* Foo
* Bar
* World

== Slide Two

A Great Story

[.notes]
--
* tell anecdote
* make a point
--</code></pre>
</div>
</div>
<div class="paragraph">
<p>In previous snippet we are creating a slide titled Slide One with bullets and another one titled Slide Two with centered text (reveal.js&#8217; default behavior) with <a href="https://github.com/hakimel/reveal.js#speaker-notes">speaker notes</a>.
Other syntax exists to create speaker notes, see <code>examples/speaker-notes.adoc</code>.</p>
</div>
<div class="paragraph">
<p>Starting with Reveal.js 3.5 speaker notes supports configurable layouts:
<span class="image"><img src="https://cloud.githubusercontent.com/assets/629429/21808439/b941eb52-d743-11e6-9936-44ef80c60580.gif" alt="b941eb52 d743 11e6 9936 44ef80c60580"></span></p>
</div>
<div class="paragraph">
<p>Speaker notes are opened by pressing <code>s</code>.
With Reveal.js 3.5 they require a webserver to work.
This limitation is not present in 3.6.
You can get a Web server running quickly with:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>ruby -run -e httpd . -p 5000 -b 127.0.0.1</pre>
</div>
</div>
<div class="paragraph">
<p>Then use your browser to navigate to the URL http://localhost:5000.</p>
</div>
</div>
<div class="sect2">
<h3 id="_slides_without_titles">Slides without titles</h3>
<div class="paragraph">
<p>There are a few ways to have no titles on slides.</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Setting your title to <code>!</code></p>
</li>
<li>
<p>Adding the <code>notitle</code> option to your slide</p>
</li>
<li>
<p>Adding the <code>conceal</code> option to your slide</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>Here is an example of the three techniques in action:</p>
</div>
<div class="listingblock">
<div class="title">concealed-slide-titles.adoc</div>
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">Unresolved directive in reveal-readme.adoc - include::examples/concealed-slide-titles.adoc[lines=5..-1]</code></pre>
</div>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
<code>conceal</code> and <code>notitle</code> have the advantage that the slide still has an id so it can be linked to.
</td>
</tr>
</table>
</div>
<div class="admonitionblock important">
<table>
<tr>
<td class="icon">
<div class="title">Important</div>
</td>
<td class="content">
Like the first page of an AsciiDoc document, the first slide is handled differently.
           To hide the whole slide use the <code>:notitle:</code> <a href="http://asciidoctor.org/docs/user-manual/#header-summary">document attribute</a>.
           To achieve the effect of hiding only the first slide&#8217;s title, combine the <code>:notitle:</code> attribute on the first slide and use <code>[%notitle]</code> on the second slide which will, in effect, be your first slide now.
</td>
</tr>
</table>
</div>
</div>
<div class="sect2">
<h3 id="_background_colors">Background Colors</h3>
<div class="paragraph">
<p>Background colors for slides can be specified by two means: a classic one and one using AsciiDoc roles.
See <a href="examples/background-color.html">background-color.adoc</a> for more examples.</p>
</div>
<div class="sect3">
<h4 id="_using_asciidoc_roles">Using AsciiDoc Roles</h4>
<div class="paragraph">
<p>Using roles respects the AsciiDoc philosophy of separation of content and presentation.
Colors are to be defined by CSS and the <a href="#customcss"><code>:customcss:</code> attribute</a> need to be used to specify the CSS file to load.
To avoid clashing with existing reveal.js themes or CSS, a specific CSS class called <code>background</code> is expected to be present.
Here is an example:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">= Title
:customcss: my-css.css

[.red.background]
== Slide One

Is very red</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">my-css.css</div>
<div class="content">
<pre class="highlight"><code class="language-css" data-lang="css">section.red.background {
  background-color: red;
}</code></pre>
</div>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
The <code>canvas</code> keyword can be used instead of <code>background</code> for the same effect.
</td>
</tr>
</table>
</div>
</div>
<div class="sect3">
<h4 id="_classic">Classic</h4>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[background-color="yellow"]
== Slide Three

Is very yellow</code></pre>
</div>
</div>
<div class="paragraph">
<p>Slide Three applies the attribute <a href="https://github.com/hakimel/reveal.js#slide-backgrounds">data-background-color</a> to the <code>reveal.js</code> &lt;section&gt; tag.
Anything accepted by CSS color formats works.</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_background_images">Background images</h3>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[%notitle]
== Grand Announcement

image::cover.jpg[background, size=cover]</code></pre>
</div>
</div>
<div class="paragraph">
<p>This will put <code>cover.jpg</code> as the slide&#8217;s background image.
It sets reveal.js&#8217; <code>data-background-image</code> attribute.
The <code>size</code> attribute is also supported.
See the <a href="https://github.com/hakimel/reveal.js#image-backgrounds">relevant reveal.js documentation</a> for details.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
Background images file names are now relative to the <code>:imagesdir:</code> attribute if set.
</td>
</tr>
</table>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
The <code>canvas</code> keyword can be used instead of <code>background</code> for the same effect.
</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[%notitle]
== The Great Goat

image::https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg[canvas,size=contain]</code></pre>
</div>
</div>
<div class="paragraph">
<p>As you can see, you can use a URL to specify your image resource too.</p>
</div>
</div>
<div class="sect2">
<h3 id="background_videos">Background videos</h3>
<div class="paragraph">
<p>A background video for a slide can be specified using the <code>background-video</code> element attribute.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[background-video="https://my.video/file.mp4",background-video-loop=true,background-video-muted=true]
== Nice background!</code></pre>
</div>
</div>
<div class="paragraph">
<p>For convenience <code>background-video-loop</code> and <code>background-video-muted</code> attributes are mapped to <code>loop</code> and <code>muted</code> options which can be specified with <code>options="loop,muted"</code>.</p>
</div>
<div class="paragraph">
<p>For example:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[background-video="https://my.video/file.mp4",options="loop,muted"]
== Nice background!</code></pre>
</div>
</div>
<div class="paragraph">
<p>See <a href="https://github.com/hakimel/reveal.js#video-backgrounds">the relevant reveal.js documentation</a> for details.
Note that the <code>data-</code> prefix is not required in asciidoc files.</p>
</div>
</div>
<div class="sect2">
<h3 id="_background_iframes">Background iframes</h3>
<div class="paragraph">
<p>The background can be replaced with anything a browser can render in an iframe using the <code>background-iframe</code> reveal.js feature.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[%notitle,background-iframe="https://www.youtube.com/embed/LaApqL4QjH8?rel=0&amp;start=3&amp;enablejsapi=1&amp;autoplay=1&amp;loop=1&amp;controls=0&amp;modestbranding=1"]
== a youtube video</code></pre>
</div>
</div>
<div class="paragraph">
<p>See <a href="https://github.com/hakimel/reveal.js#iframe-backgrounds">the relevant reveal.js documentation</a> for details.</p>
</div>
</div>
<div class="sect2">
<h3 id="_slide_transitions">Slide Transitions</h3>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[transition=zoom, %notitle]
== Zoom zoom

This slide will override the presentation transition and zoom!

[transition-speed=fast, %notitle]
== Speed

Choose from three transition speeds: default, fast or slow!</code></pre>
</div>
</div>
<div class="paragraph">
<p>See <a href="https://github.com/hakimel/reveal.js#slide-transitions">the relevant reveal.js documentation</a> for details.</p>
</div>
</div>
<div class="sect2">
<h3 id="_fragments">Fragments</h3>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">== Slide Four

[%step]
* this
* is
* revealed
* gradually</code></pre>
</div>
</div>
<div class="paragraph">
<p>Slide Four has bullets that are revealed one after the other.
This is what <code>reveal.js</code> calls <a href="http://lab.hakim.se/reveal-js/#/fragments">fragments</a>.
Applying the step option or role on a list (<code>[%step]</code> or <code>[.step]</code>) will do the trick.
Here is <a href="https://github.com/hakimel/reveal.js#fragments">the relevant reveal.js
documentation</a> on the topic.
Note that only <code>fade-in</code> is supported for lists at the moment.</p>
</div>
</div>
<div class="sect2">
<h3 id="_stretch_class_attribute">Stretch class attribute</h3>
<div class="paragraph">
<p>Reveal.js supports a special class that will give all available screen space to an HTML node.
This class element is named <code>stretch</code>.</p>
</div>
<div class="paragraph">
<p>Sometimes it&#8217;s desirable to have an element, like an image or video, stretch to consume as much space as possible within a given slide.</p>
</div>
<div class="paragraph">
<p>To apply that class to block simply use asciidoctor&#8217;s class assignment:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>[.stretch]</pre>
</div>
</div>
<div class="paragraph">
<p>See <a href="https://github.com/hakimel/reveal.js#stretching-elements">reveal.js documentation on stretching elements</a>.</p>
</div>
</div>
<div class="sect2">
<h3 id="_videos">Videos</h3>
<div class="paragraph">
<p>In addition to <a href="#background_videos">background videos</a>, videos can be inserted directly into slides.
The syntax is the standard <a href="http://asciidoctor.org/docs/user-manual/#video">asciidoc video block macro</a> syntax.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">== Trains, we love trains!

video::kZH9JtPBq7k[youtube, start=34, options=autoplay]</code></pre>
</div>
</div>
<div class="paragraph">
<p>By default videos are given as much space as possible.
To override that behavior use the <code>width</code> and <code>height</code> named attributes.</p>
</div>
</div>
<div class="sect2">
<h3 id="_syntax_highlighting">Syntax highlighting</h3>
<div class="paragraph">
<p>reveal.js is well integrated with <a href="https://highlightjs.org/">Highlight.js</a> for syntax highlighting.
Asciidoctor reveal.js supports that.
You can activate Highlight.js syntax highlighting (disabled by default) by setting the <code>source-highlighter</code> document attribute as follows:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">= Presentation Title
// [...] other document attributes
:source-highlighter: highlightjs</code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre>By default, we are using a prebuilt version of Highlight.js with 34 commonly used languages hosted on https://cdnjs.com/[cdnjs].
You can load additionnal languages using the `:highlightjs-languages:` attribute:

```
// load yaml and scilab languages
:highlightjs-languages: yaml, scilab
```

You can also load Highlight.js from a custom base directory (or remote URL) using the `:highlightjsdir:` attribute:

```
// load from a local path
:highlightjsdir: highlight
// load from jsdelivr CDN
//:highlightjsdir: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build</pre>
</div>
</div>
<div class="paragraph">
<p>Once enabled, you can write code blocks as usual:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">== Slide Five

Uses highlighted code

[source, python]
----
print "Hello World"
----</code></pre>
</div>
</div>
<div class="paragraph">
<p>By default <code>[source]</code> blocks and blocks delimited by <code>----</code> will be highlighted.
An explicit <code>[listing]</code> block will not be highlighted.
<code>highlight.js</code> does language auto-detection but using the <code>language="&#8230;&#8203;"</code> attribute will hint the highlighter.
For example this will highlight this source code as Perl:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">== Slide Five

[source,perl]
----
print "$0: hello world\n"
----</code></pre>
</div>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
Alternatively, you can use <a href="http://rouge.jneen.net/">Rouge</a>, <a href="http://coderay.rubychan.de">Coderay</a> or <a href="http://pygments.org">Pygments</a> as syntax highlighters,
if you are using the Asciidoctor/Ruby/Bundler toolchain (not Asciidoctor.js/JavaScript/npm).
Check the <code>examples/</code> directory for examples and notes about what needs to be done for them to work.
They are considered unsupported by the asciidoctor-reveal.js project.
</td>
</tr>
</table>
</div>
</div>
<div class="sect2">
<h3 id="_vertical_slides">Vertical slides</h3>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">== Slide Six

Top slide

=== Slide Six.One

This is a vertical subslide</code></pre>
</div>
</div>
<div class="paragraph">
<p>Slide Six uses the vertical slide feature of <code>reveal.js</code>.
Slide Six.One will be rendered vertically below Slide Six.
Here is <a href="https://github.com/hakimel/reveal.js#markup">the relevant reveal.js
documentation</a> on that topic.</p>
</div>
</div>
<div class="sect2">
<h3 id="_columns_layout">Columns layout</h3>
<div class="paragraph">
<p>Inspired by <a href="https://bulma.io/">Bulma</a>, Asciidoctor reveal.js supports columns layout out-of-the-box:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[.columns]
== 2 columns

[.column]
--
* **Edgar Allen Poe**
* Sheri S. Tepper
* Bill Bryson
--

[.column]
--
Edgar Allan Poe (/poʊ/; born Edgar Poe; January 19, 1809 – October 7, 1849) was an American writer, editor, and literary critic.
--</code></pre>
</div>
</div>
<div class="paragraph">
<p>If you do not specify a size, each column will have an equal width, no matter the number of columns.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[.columns]
== 3 columns

[.column]
* Java
* **Kotlin**

[.column]
* Node
* **Deno**

[.column]
* Ruby
* **Crystal**</code></pre>
</div>
</div>
<div class="paragraph">
<p>If you want to change the size of a single column, you can use one of the following classes:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><code>is-three-quarters</code></p>
</li>
<li>
<p><code>is-two-thirds</code></p>
</li>
<li>
<p><code>is-half</code></p>
</li>
<li>
<p><code>is-one-third</code></p>
</li>
<li>
<p><code>is-one-quarter</code></p>
</li>
<li>
<p><code>is-full</code></p>
</li>
</ul>
</div>
<div class="paragraph">
<p>The other columns will fill up the remaining space automatically.<br>
You can use the following multiples of 20% as well:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><code>is-four-fifths</code></p>
</li>
<li>
<p><code>is-three-fifths</code></p>
</li>
<li>
<p><code>is-two-fifths</code></p>
</li>
<li>
<p><code>is-one-fifth</code></p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[.columns]
== Columns with size

[.column.is-one-third]
--
* **Kotlin**
* Java
* Scala
--

[.column]
--
Programming language for Android, mobile cross-platform
and web development, server-side, native,
and data science. Open source forever Github.
--</code></pre>
</div>
</div>
<div class="paragraph">
<p>The vertical alignment of columns defaults to top aligned.
Content can be centered by adding the <code>is-vcentered</code> class to the slide.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[.columns.is-vcentered]
== Columns Vertically Centered

[.column]
--
* Few
* Bullets
* Here
--

[.column]
image::large-image.png[]</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_asciidoctor_reveal_js_specific_roles">Asciidoctor reveal.js specific roles</h3>
<div class="paragraph">
<p>Roles are usually applied with the following syntax where the <code>important-text</code> CSS class would be applied to the slide title in the generated HTML:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[.important-text]
== Slide Title

* Some
* Information</code></pre>
</div>
</div>
<div class="paragraph">
<p>Or</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[role="important-text"]
== Slide Title

* Some
* Information</code></pre>
</div>
</div>
<div class="paragraph">
<p>See <a href="https://asciidoctor.org/docs/user-manual/#role">Asciidoctor&#8217;s documentation</a> for more details.</p>
</div>
<div class="paragraph">
<div class="title">Image specific note</div>
<p>In addition to the <a href="https://asciidoctor.org/docs/user-manual/#positioning-attributes">existing attributes</a> to position images, roles can be used as well. However, the shorthand syntax (.) doesn&#8217;t work in the image macro arguments but must be used above with the angle bracket syntax.
See <a href="examples/images.html">images.adoc</a> for examples.</p>
</div>
<div class="paragraph">
<p>Here is a list of supported roles:</p>
</div>
<div class="dlist">
<dl>
<dt class="hdlist1">right</dt>
<dd>
<p>Will apply a <code>float: right</code> style to the affected block</p>
</dd>
</dl>
</div>
</div>
<div class="sect2">
<h3 id="_asciidoctor_reveal_js_specific_attributes">Asciidoctor reveal.js specific attributes</h3>
<div class="sect3">
<h4 id="_iframe_preview_overlay">iFrame Preview Overlay</h4>
<div class="paragraph">
<p>The reveal.js feature activated by a global <code>previewLinks: true</code> configuration or by adding the <code>data-preview-link</code> HTML attribute to <code>&lt;a&gt;</code> tags can be activated by using special AsciiDoc attributes.</p>
</div>
<div class="paragraph">
<p>On links use the <code>preview=true</code> attribute, on images use the <code>link_preview=true</code> attribute and globally you can set <code>:revealjs_previewlinks:</code> attribute.</p>
</div>
<div class="paragraph">
<p>See <a href="examples/links.html">links.adoc</a> and <a href="examples/links-preview.html">links-preview.adoc</a> for examples.</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_title_slide_customization">Title slide customization</h3>
<div class="paragraph">
<p>The title slide is customized via Asciidoc attributes.
These are the global variable assigned at the top of a document under the lead
title that look like this: <code>:name: value</code>.</p>
</div>
<div class="paragraph">
<p>This converter supports changing the color, image, video, iframe and
transitions of the title slide.</p>
</div>
<div class="paragraph">
<p>Read <a href="https://github.com/hakimel/reveal.js#slide-backgrounds">the relevant reveal.js documentation</a> to understand what attributes need to be set.
Keep in mind that for title slides you must replace <code>data-</code> with <code>title-slide-</code>.</p>
</div>
<div class="paragraph">
<p>Here is an example:</p>
</div>
<div class="listingblock">
<div class="title">title-slide-image.adoc</div>
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">Unresolved directive in reveal-readme.adoc - include::examples/title-slide-image.adoc[lines=5..-1]</code></pre>
</div>
</div>
<div class="paragraph">
<p>The title slide is also added a <code>title</code> CSS class to help with template customization.</p>
</div>
</div>
<div class="sect2">
<h3 id="_content_meant_for_multiple_converters">Content meant for multiple converters</h3>
<div class="paragraph">
<p>Some content can be created with both slides and book in mind.</p>
</div>
<div class="paragraph">
<p>To mark slides split points you can use preprocessor conditionals combined
with a backend declaration.
Breaking points are set using slides with no title <code>=== !</code> wrapped in a
conditional: <code>ifdef::backend-revealjs[=== !]</code>.
In the end, the whole document has to be compiled with the backend option:
<code>-b revealjs</code></p>
</div>
<div class="paragraph">
<p>For example:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">== Main section

=== Sub Section

Small +
Multiline +
intro

. very
. long
. list
. of
. items

ifdef::backend-revealjs[=== !]

Some overview diagram

ifdef::backend-revealjs[=== !]

Detailed view diagram</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="customcss">CSS override</h3>
<div class="paragraph">
<p>If you use the <code>:customcss:</code> document attribute, a CSS file of the name given in the attribute is added to the list of CSS resources loaded by the rendered HTML.
Doing so, you can then easily override specific elements of your theme per presentation.</p>
</div>
<div class="paragraph">
<p>For example, to do proper position-independent text placement of a title slide with a specific background you can use:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-css" data-lang="css">.reveal section.title h1 {
    margin-top: 2.3em;
}

.reveal section.title small {
    margin-top: 15.3em;
    font-weight: bold;
    color: white;
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>If the <code>:customcss:</code> attribute value is empty then <code>asciidoctor-revealjs.css</code> is the CSS resource that the presentation is linked to.</p>
</div>
</div>
<div class="sect2">
<h3 id="_slide_state">Slide state</h3>
<div class="paragraph">
<p>Reveal.js supports a <a href="https://github.com/hakimel/reveal.js#slide-states">data-state</a> tag that can be added on slides which gets rendered into <code>&lt;section&gt;</code> tags.
In AsciiDoc the <code>data-state</code> can be applied to a slide by adding a state attribute to a section like this:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[state=topic]
== Epic Topic</code></pre>
</div>
</div>
<div class="paragraph">
<p>That state can be queried from JavaScript or used in CSS to apply further customization to your slide deck.
For example, by combining this feature with the <a href="#customcss">CSS override</a> one, you can alter fonts for specific pages with this CSS:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-css" data-lang="css">@import 'https://fonts.googleapis.com/css?family=Baloo+Bhai';

section[data-state="topic"] h2 {
    font-family: 'Baloo Bhai', cursive;
    font-size: 4em;
}</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_admonitions">Admonitions</h3>
<div class="paragraph">
<p>Asciidoctor font-based <a href="http://asciidoctor.org/docs/user-manual/#admonition">admonitions</a> are supported.
Make sure to add the following attribute to your document:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">:icons: font</code></pre>
</div>
</div>
<div class="paragraph">
<p>Here is an example slide:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">== But first

WARNING: This presentation is dangerous!</code></pre>
</div>
</div>
<div class="paragraph">
<p>Here are details about Asciidoctor&#8217;s <a href="http://asciidoctor.org/docs/user-manual/#admonition-icons">Admonition icons</a> support.</p>
</div>
</div>
<div class="sect2">
<h3 id="_supplemental_content_with_docinfo">Supplemental Content with Docinfo</h3>
<div class="paragraph">
<p>It&#8217;s possible to inject supplemental content into the output document using <a href="http://asciidoctor.org/docs/user-manual/#docinfo-file">docinfo files</a>.
This core feature of AsciiDoc has been adapted to work with the reveal.js converter.</p>
</div>
<div class="paragraph">
<p>Currently, there are three insertion locations for docinfo content in a reveal.js document:</p>
</div>
<div class="dlist">
<dl>
<dt class="hdlist1">head</dt>
<dd>
<p>content is inserted after the last child of the <code>&lt;head&gt;</code> element</p>
</dd>
<dt class="hdlist1">header</dt>
<dd>
<p>content is inserted before the first child of the <code>&lt;div class="slides"&gt;</code> element (before the slides)</p>
</dd>
<dt class="hdlist1">footer</dt>
<dd>
<p>content is inserted after the last child of the <code>&lt;div class="slides"&gt;</code> element (after the slides)</p>
</dd>
</dl>
</div>
<div class="paragraph">
<p>The content you want to insert goes into a sibling file of the slide deck document with the following filename patterns:</p>
</div>
<div class="dlist">
<dl>
<dt class="hdlist1">head</dt>
<dd>
<p><code>docinfo-revealjs.html</code></p>
</dd>
<dt class="hdlist1">header</dt>
<dd>
<p><code>docinfo-header-revealjs.html</code></p>
</dd>
<dt class="hdlist1">footer</dt>
<dd>
<p><code>docinfo-footer-revealjs.html</code></p>
</dd>
</dl>
</div>
<div class="paragraph">
<p>For example, let&#8217;s say you want to embed a tweet into your slide deck.
You might inject the shared embedding JavaScript using a footer docinfo file:</p>
</div>
<div class="listingblock">
<div class="title">src/docinfo-footer-revealjs.html</div>
<div class="content">
<pre class="highlight"><code class="language-html" data-lang="html">&lt;script src="https://platform.twitter.com/widgets.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
<div class="paragraph">
<p>You then need to set the following document attribute in the AsciiDoc header:</p>
</div>
<div class="listingblock">
<div class="content">
<pre>:docinfo: shared</pre>
</div>
</div>
<div class="paragraph">
<p>When this attribute is defined, the converter will automatically read the docinfo file(s) and insert the contents into the specified location in the output document.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_reveal_js_options">Reveal.js Options</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Some attributes can be set at the top of the document that are specific to the <code>reveal.js</code> converter.
They use the same name as in the <code>reveal.js</code> project except that they are prepended by <code>revealjs_</code> and case doesn&#8217;t matter.
They are applied in the <a href="templates/document.html.slim">document template</a>.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
Default settings are based on <code>reveal.js</code> default settings.
</td>
</tr>
</table>
</div>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 25%;">
<col style="width: 25%;">
<col style="width: 50%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Attribute</th>
<th class="tableblock halign-left valign-top">Value(s)</th>
<th class="tableblock halign-left valign-top">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_theme:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">beige, <strong>black</strong>, league, night, serif, simple, sky, solarized, white</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Chooses one of reveal.js&#8217; <a href="https://github.com/hakimel/reveal.js#theming">built-in themes</a>.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_customtheme:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;file|URL&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Overrides CSS with given file or URL.
Default is disabled.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:highlightjs-theme:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;file|URL&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Overrides <a href="https://highlightjs.org">highlight.js</a> CSS style with given file or URL.
Default is built-in <em class="path">lib/css/zenburn.css</em>.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjsdir:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;file|URL&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Overrides reveal.js directory.
Example: ../reveal.js or
<a href="https://cdn.jsdelivr.net/npm/reveal.js@3.9.2" class="bare">https://cdn.jsdelivr.net/npm/reveal.js@3.9.2</a>.
Default is <code>reveal.js/</code> unless in a Node.js environment where it is <code>node_modules/reveal.js/</code>.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_controls:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Display presentation control arrows</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_controlsTutorial:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Help the user learn the controls by providing hints, for example by bouncing the down arrow when they first encounter a vertical slide</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_controlsLayout:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">edges, <strong>bottom-right</strong></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Determines where controls appear, "edges" or "bottom-right"</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_controlsBackArrows:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>faded</strong>, hidden, visible</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Visibility rule for backwards navigation arrows; "faded", "hidden" or "visible"</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_progress:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Display a presentation progress bar.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_slideNumber:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">true, <strong>false</strong>, h.v, h/v, c, c/t</p></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Display the page number of the current slide.
<strong>true</strong> will display the slide number with default formatting.
Additional formatting is available:</p>
</div>
<div class="dlist">
<dl>
<dt class="hdlist1">h.v</dt>
<dd>
<p>horizontal . vertical slide number (default)</p>
</dd>
<dt class="hdlist1">h/v</dt>
<dd>
<p>horizontal / vertical slide number</p>
</dd>
<dt class="hdlist1">c</dt>
<dd>
<p>flattened slide number</p>
</dd>
<dt class="hdlist1">c/t</dt>
<dd>
<p>flattened slide number / total slides</p>
</dd>
</dl>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_showSlideNumber:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>all</strong>, speaker, print</p></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Control which views the slide number displays on using the "showSlideNumber" value:</p>
</div>
<div class="dlist">
<dl>
<dt class="hdlist1">all</dt>
<dd>
<p>show on all views (default)</p>
</dd>
<dt class="hdlist1">speaker</dt>
<dd>
<p>only show slide numbers on speaker notes view</p>
</dd>
<dt class="hdlist1">print</dt>
<dd>
<p>only show slide numbers when printing to PDF</p>
</dd>
</dl>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_hash:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">true, <strong>false</strong></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Add the current slide number to the URL hash so that reloading the page/copying the URL will return you to the same slide</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_history:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">true, <strong>false</strong></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Push each slide change to the browser history. Implies <code>hash: true</code></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_keyboard:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Enable keyboard shortcuts for navigation.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_overview:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Enable the slide overview mode.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_touch:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Enables touch navigation on devices with touch input.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_center:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Vertical centering of slides.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_loop:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">true, <strong>false</strong></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Loop the presentation.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_rtl:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">true, <strong>false</strong></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Change the presentation direction to be RTL.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_navigationMode:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>default</strong>, linear, grid</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">See <a href="https://github.com/hakimel/reveal.js/#navigation-mode" class="bare">https://github.com/hakimel/reveal.js/#navigation-mode</a> for details</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_shuffle:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">true, <strong>false</strong></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Randomizes the order of slides each time the presentation loads</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_fragments:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Turns fragments on and off globally.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_fragmentInURL:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">true, <strong>false</strong></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Flags whether to include the current fragment in the URL, so that reloading brings you to the same fragment position</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_embedded:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">true, <strong>false</strong></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Flags if the presentation is running in an embedded mode (i.e., contained within a limited portion of the screen).</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_help:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Flags if we should show a help overlay when the questionmark key is pressed</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_showNotes:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Flags if speaker notes should be visible to all viewers</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_autoPlayMedia:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>null</strong>, true, false</p></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Global override for autolaying embedded media (video/audio/iframe)</p>
</div>
<div class="dlist">
<dl>
<dt class="hdlist1">null</dt>
<dd>
<p>Media will only autoplay if data-autoplay is present</p>
</dd>
<dt class="hdlist1">true</dt>
<dd>
<p>All media will autoplay, regardless of individual setting</p>
</dd>
<dt class="hdlist1">false</dt>
<dd>
<p>No media will autoplay, regardless of individual setting</p>
</dd>
</dl>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_preloadIframes:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>null</strong>, true, false</p></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Global override for preloading lazy-loaded iframes</p>
</div>
<div class="dlist">
<dl>
<dt class="hdlist1">null</dt>
<dd>
<p>Iframes with <code>data-src</code> AND <code>data-preload</code> will be loaded when within the <code>viewDistance</code>, iframes with only <code>data-src</code> will be loaded when visible</p>
</dd>
<dt class="hdlist1">true</dt>
<dd>
<p>All iframes with <code>data-src</code> will be loaded when within the <code>viewDistance</code></p>
</dd>
<dt class="hdlist1">false</dt>
<dd>
<p>All iframes with <code>data-src</code> will be loaded only when visible</p>
</dd>
</dl>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_autoSlide:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;integer&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Delay in milliseconds between automatically proceeding to the next slide.
Disabled when set to <strong>0</strong> (the default).
This value can be overwritten by using a <code>data-autoslide</code> attribute on your slides.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_autoSlideStoppable:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Stop auto-sliding after user input.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_autoSlideMethod:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Reveal.navigateNext</strong></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Use this method for navigation when auto-sliding</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_defaultTiming:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;integer&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Specify the average time in seconds that you think you will spend presenting each slide.
This is used to show a pacing timer in the speaker view.
Defaults to <strong>120</strong></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_totalTime:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;integer&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Specify the total time in seconds that is available to present.
If this is set to a nonzero value, the pacing timer will work out the time available for each slide, instead of using the defaultTiming value.
Defaults to <strong>0</strong></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_minimumTimePerSlide:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;integer&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Specify the minimum amount of time you want to allot to each slide, if using the totalTime calculation method.
If the automated time allocation causes slide pacing to fall below this threshold, then you will see an alert in the speaker notes window.
Defaults to <strong>0</strong>.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_mouseWheel:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">true, <strong>false</strong></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Enable slide navigation via mouse wheel.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_hideInactiveCursor:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Hide cursor if inactive</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_hideCursorTime:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;integer&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Time before the cursor is hidden (in ms).
Defaults to <strong>5000</strong>.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_hideAddressBar:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Hides the address bar on mobile devices.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_previewLinks:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">true, <strong>false</strong></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Opens links in an iframe preview overlay.
Add the <code>preview=true</code> attribute on links or <code>link_preview=true</code> attribute on images to customize each link individually.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_transition:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">none, fade, <strong>slide</strong>, convex, concave, zoom</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Transition style.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_transitionSpeed:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>default</strong>, fast, slow</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Transition speed.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_backgroundTransition:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">none, <strong>fade</strong>, slide, convex, concave, zoom</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Transition style for full page slide backgrounds.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_viewDistance:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;integer&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Number of slides away from the current that are visible.
Default: <strong>3</strong>.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_mobileViewDistance:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;integer&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Number of slides away from the current that are visible on mobile devices.
It is advisable to set this to a lower number than viewDistance in order to save resources.
Default <strong>3</strong>.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_parallaxBackgroundImage:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;file|URL&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Parallax background image.
Defaults to none</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_parallaxBackgroundSize:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;CSS size syntax&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Parallax background size (accepts any CSS syntax).
Defaults to none</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_parallaxBackgroundHorizontal:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;Number of pixels&gt;</p></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Number of pixels to move the parallax background per slide</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Calculated automatically unless specified</p>
</li>
<li>
<p>Set to 0 to disable movement along an axis</p>
</li>
</ul>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_parallaxBackgroundVertical:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;Number of pixels&gt;</p></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Number of pixels to move the parallax background per slide</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Calculated automatically unless specified</p>
</li>
<li>
<p>Set to 0 to disable movement along an axis</p>
</li>
</ul>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_display:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;a valid CSS display mode&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The display mode that will be used to show slides.
Defaults to <strong>block</strong></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_width:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;pixels|percentage unit&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Independent from the values, the aspect ratio will be preserved
	when scaled to fit different resolutions. Defaults to <strong>960</strong></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_height:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;pixels|percentage unit&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">See <code>:revealjs_width:</code>. Defaults to <strong>700</strong></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_margin:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;percentage value&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Factor of the display size that should remain empty around the content. Defaults to <strong>0.1</strong></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_pdfseparatefragments:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>true</strong>, false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">In PDF export, put each fragment on a separate page.
Defaults to <strong>true</strong></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>:revealjs_pdfmaxpagesperslide:</code></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">&lt;integer&gt;</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">In PDF export, when a slide does not fit on a single page, maximum number of pages.
Defaults to <strong>1</strong></p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p>If you want to build a custom theme or customize an existing one you should
look at the
<a href="https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md">reveal.js
theme documentation</a> and use the <code>revealjs_customtheme</code> AsciiDoc attribute to
activate it.</p>
</div>
<div class="sect2">
<h3 id="_pdf_export">PDF Export</h3>
<div class="paragraph">
<p>Follow <a href="https://github.com/hakimel/reveal.js#pdf-export">reveal.js' documentation</a> for PDF export.
We would add that we have successfully used PDF export without the requirement of a Web server.</p>
</div>
</div>
<div class="sect2">
<h3 id="_default_plugins">Default plugins</h3>
<div class="paragraph">
<p>By default, generated presentations will have the following reveal.js plugins enabled:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>plugin/zoom-js/zoom.js</p>
</li>
<li>
<p>plugin/notes/notes.js</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>All these plugins are part of the reveal.js distribution.</p>
</div>
<div class="paragraph">
<p>To enable or disable a built-in plugin, it is possible to set the <code>revealjs_plugin_[plugin name]</code> attribute to <code>enable</code> or <code>disable</code>.</p>
</div>
<div class="paragraph">
<p>For example, to disable all the default plugins set the following document attributes:</p>
</div>
<div class="listingblock">
<div class="content">
<pre>:revealjs_plugin_zoom: disabled
:revealjs_plugin_notes: disabled</pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_additional_plugins">Additional plugins</h3>
<div class="paragraph">
<p>Additional reveal.js plugins can be installed and activated using AsciiDoc attributes and external javascript files.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Extract the plugin files in a directory</p>
</li>
<li>
<p>Create a JavaScript file that will contain the JavaScript statements to load the plugin (only one required even if you are using several plugins)</p>
</li>
<li>
<p>Add a <code>:revealjs_plugins:</code> attribute to point to that JavaScript file</p>
</li>
<li>
<p>(Optional) Add a <code>:revealjs_plugins_configuration:</code> attribute to point to a JavaScript file that configures the plugins you use</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>Looking at the example provided in the repository will provide guidance: <a href="examples/revealjs-plugins.adoc">AsciiDoc source</a>, <a href="examples/revealjs-plugins.js">Plugin Loader</a>, <a href="examples/revealjs-plugins-conf.js">Plugin Configuration</a>.</p>
</div>
<div class="paragraph">
<p>Read <a href="https://github.com/hakimel/reveal.js#dependencies">the relevant reveal.js documentation</a> to understand more about reveal.js plugins.
A <a href="https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware">list of existing reveal.js plugins</a> is also maintained upstream.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_minimum_requirements">Minimum Requirements</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Our requirements are expressed in our packages and by our dependencies.
Basically, all you need is the package manager of the flavor of Asciidoctor reveal.js you are interested to run:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>With Ruby / Bundler: A <a href="https://www.ruby-lang.org/en/downloads/">recent Ruby</a> and <a href="https://bundler.io/">Bundler</a></p>
</li>
<li>
<p>With JavaScript (Node.js) / npm: a <a href="https://nodejs.org/en/download/">recent Node.js</a> environment</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>If you need more details about our dependencies check out Asciidoctor dependencies:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>With Ruby / Bundler: <a href="https://github.com/asciidoctor/asciidoctor/tree/v2.0.10#requirements">Asciidoctor</a> 2.0.10</p>
</li>
<li>
<p>With JavaScript (Node.js) / NPM: <a href="https://github.com/asciidoctor/asciidoctor.js/blob/v2.0.3/packages/core/package.json">Asciidoctor.js</a> 2.0.3</p>
</li>
</ul>
</div>
</div>
</div>
<div class="sect1">
<h2 id="revealjs-compatibility-matrix">reveal.js Compatibility Matrix</h2>
<div class="sectionbody">
<div class="paragraph">
<p>We try as much as possible to be compatible with a broad range of reveal.js versions.
However, changes made by that project sometimes forces us to drop compatibility with older reveal.js releases.
This table tracks this compatibility.</p>
</div>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 50%;">
<col style="width: 50%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Asciidoctor reveal.js version</th>
<th class="tableblock halign-left valign-top">reveal.js version</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">4.x</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">3.9 - 3.8</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">3.x, 2.x, 1.x</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">3.7 - 3.0</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Unversioned releases</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">2.x</p></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sect1">
<h2 id="asciidoctorjs-compatibility-matrix">Asciidoctor.js Compatibility Matrix</h2>
<div class="sectionbody">
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
This section is intended only for more advanced users who combine extensions or maintain slide decks over many releases and need to update their dependencies.
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Due to our Ruby to JavaScript conversion process, published npm packages have strict requirements with which version of Asciidoctor.js they are compatible with.
This table tracks this compatibility.</p>
</div>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 50%;">
<col style="width: 50%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Asciidoctor-reveal.js version</th>
<th class="tableblock halign-left valign-top">Asciidoctor.js version</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">3.x</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">2.x</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">2.x</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">1.5.9</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">1.1.x</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">1.5.6-preview.4</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p>Be aware that it is always possible to recompile the converter into JavaScript from source so compatibility can be created by anyone if needed.
More details on that topic can be found <a href="HACKING.adoc#node-binary-compatibility">in the development guide</a>.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_showcase_presentations">Showcase Presentations</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="_power_catchupeverything_practical_and_important_in_java_9_to_13">Power Catchup&#8201;&#8212;&#8201;Everything Practical and Important in Java 9 to 13</h3>
<div class="paragraph">
<p>A smooth presentation, featuring video backgrounds, slide transitions, code and callout examples and the use of notes.</p>
</div>
<div class="paragraph">
<p><a href="https://bentolor.github.io/java9to13/">Presentation</a> and <a href="https://github.com/bentolor/java9to13">source</a></p>
</div>
<div class="sect3">
<h4 id="_screenshots">Screenshots</h4>
<div class="paragraph">
<p><span class="image"><a class="image" href="./showcase/java9to13_4.png"><img src="showcase/java9to13_4.png" alt="java9to13 4" width="200"></a></span> <span class="image"><a class="image" href="showcase/java9to13_1.jpg"><img src="showcase/java9to13_1.jpg" alt="java9to13 1" width="200"></a></span></p>
</div>
<div class="paragraph">
<p><span class="image"><a class="image" href="showcase/java9to13_2.jpg"><img src="showcase/java9to13_2.jpg" alt="java9to13 2" width="200"></a></span>
<span class="image"><a class="image" href="showcase/java9to13_3.png"><img src="showcase/java9to13_3.png" alt="java9to13 3" width="200"></a></span></p>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_contributing">Contributing</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Interested in contributing?
We are interested!
Developer-focused documentation is <a href="HACKING.adoc">over here</a>.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_copyright_and_licensing">Copyright and Licensing</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Copyright &#169; 2012-2020 Olivier Bilodeau, Guillaume Grossetie, Dan Allen, Rahman Usta, Charles Moulliard and the Asciidoctor Project.
Free use of this software is granted under the terms of the MIT License.</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-text">
Last updated 2020-07-27 09:40:11 +0800
</div>
</div>
</body>
</html>